import React, { useState } from "react";
import Wss from "./Wo.module.css";
import { useNavigate } from "react-router-dom";
import { Arrow} from "@react-vant/icons";
import Tar from '../../hooks/contact'
export default function Wo() {
  let navigate = useNavigate();
  let [obj, setobj] = useState(JSON.parse(localStorage.getItem('user')))
  let liss = [
    { name: "排行榜", path: "/yzk/paihangbang" },
    { name: "测量记录", path: "/yzk/xiangqing" },
    { name: "我的收益", path: "/yzk/shouyi" },
    { name: "测量形象", path: "/yzk/celiang" },
    { name: "测量话术", path: "/yzk/huashu" },
    { name: "测量教程", path: "/yzk/jiaocheng" },
    { name: "设置", path: "/yzk/shezhi" },
  ];
  let tioss= (i)=>{
    navigate(i)
  }
  return (
    <div style={{ backgroundColor: "rgb(242,242,242)" }}>
      <div style={{ backgroundColor: "white", overflow: "hidden" }}>
        <p
          style={{ marginTop: "2rem", fontSize: "2.5rem", marginLeft: "15rem" }}
        >
          个人中心
        </p>
      </div>
      <div
        style={{ height: "12rem", backgroundColor: "white", marginTop: "1rem" }}
      >
        <div style={{ float: "left", marginLeft: "3rem" }}>
          <img
            src={obj.imgsrc}
            style={{ width: "10rem", height: "10rem", borderRadius: "50%" }}
          ></img>
        </div>
        <div style={{ float: "left", marginLeft: "2rem", marginTop: "4rem" }} onClick={() => navigate("/yzk/geren")}>
          <h2 style={{ fontSize: "2rem" }}>
            {obj.name}
            <br />
            <span style={{ fontSize: "1.6rem" }}>首席设计师</span>
          </h2>
        </div>
      </div>
      <div id={Wss.gnList}>
        {liss.map((item, index) => {
          return (
            <div
              style={{
                width: "100%",
                height: "5rem",
                backgroundColor: "#fff",
                marginBottom: "1rem",
                marginTop: "1rem",
                boxSizing: "border-box",
                display: "flex",
                justifyContent: "space-between",
                paddingRight: "2rem",
                alignItems: 'center'
              }}
              key={index}
            >
              <p style={{ fontSize: "1.5rem", marginLeft: "3rem" }}> {item.name}</p>
              <p onClick={()=>tioss(item.path)}><Arrow  /></p>
            </div>
          );
        })}
      </div>
      <Tar />
    </div>
  );
}
